<template>
	<div>
		<el-page-header @back="goBack" content="搜索结果">
		</el-page-header>
		<el-row type="flex" class="row-bg" justify="center">
			<el-col :span="6">
				<el-input v-model="value" placeholder="请输入内容" @change="onSearch"></el-input>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
			</el-col>
		</el-row>
		<el-table :data="searchData" stripe style="width: 100%" @current-change="getsongurlData">
			<el-table-column type="index" width="50">
			</el-table-column>
			<el-table-column prop="name" label="歌曲" width="900">
			</el-table-column>
			<el-table-column label="歌手">
				<template slot-scope="scope">
					<span v-for=" (value1,index1) in scope.row.ar" :key="index1">{{value1.name}}
						{{index1 < scope.row.ar.length - 1?'、':''}}</span>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				searchData: null
			}
		},
		created() {
			this.getsearchData();
			this.value = this.$route.query.keywords
		},
		methods: {
			//获取搜索结果数据
			async getsearchData() {
				let {
					data: ret
				} = await this.$http.get('/cloudsearch?keywords=' + this.$route.query.keywords)
				console.log(ret)
				this.searchData = ret.result.songs
			},
			goBack() {
				this.$router.back()
			},
			async onSearch() {
				let {
					data: ret
				} = await this.$http.get('/cloudsearch?keywords=' + this.value)
				//console.log(ret)
				this.searchData = ret.result.songs
			},
			//获取歌曲播放url
			async getsongurlData(val) {
				let {
					data: ret
				} = await this.$http.get('/song/url?id=' + val.id)
				//console.log(ret)
				if (ret.code == 200) {
					//父页面数据
					let singernames = val.ar.map((item, index) => {
						return item.name;
					});
					singernames = singernames.join("、");
					this.$parent.$parent.$parent.currentSong.url = ret.data[0].url;
					this.$parent.$parent.$parent.currentSong.singer = singernames;
					this.$parent.$parent.$parent.currentSong.song = val.name;
				} else {
					this.$toast(ret.message);
				}
			},
		}
	}
</script>

<style>
</style>
